<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 导入bootstrap -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>个人设置</title>
</head>

<body>
  <!-- toast 提示框 -->
  <div class="toast my-toast" data-bs-autohide="true" data-bs-delay="1500" aria-live="assertive" aria-atomic="true" role="alert">
    <div class="toast-body">
      <div class="alert alert-success info-box" role="alert">
        操作成功
      </div>
    </div>
  </div>
  <!-- 核心内容区域 -->
  <div class="container">
    <ul class="my-nav">
      <li class="active">基本设置</li>
      <li>安全设置</li>
      <li>账号绑定</li>
      <li>新消息通知</li>
    </ul>
    <div class="content">
      <div class="info-wrap">
        <h3 class="title">基本设置</h3>
        <form class="user-form" action="javascript:;">
          <div class="form-item">
            <label for="email">邮箱</label>
            <input id="email" name="email" class="email" type="text" placeholder="请输入邮箱" autocomplete="off">
          </div>
          <div class="form-item">
            <label for="nickname">昵称</label>
            <input id="nickname" name="nickname" class="nickname" type="text" placeholder="请输入昵称" autocomplete="off">
          </div>
          <div class="form-item">
            <label>性别</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="0">男</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="1">女</label>
          </div>
          <div class="form-item">
            <label for="desc">个人简介</label>
            <textarea id="desc" name="desc" class="desc" placeholder="请输入个人简介" cols="20" rows="10" autocomplete="off"></textarea>
          </div>
          <button class="submit">提交</button>
        </form>
      </div>
      <div class="avatar-box">
        <h4 class="avatar-title">头像</h3>
          <img class="avatar" src="./img/头像.png" alt="">
          <label for="upload">更换头像</label>
          <input id="upload" type="file">
      </div>

    </div>
  </div>
  <!-- 导入 axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
  <!-- 导入 bootstrap -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
  <!-- 导入 form-serialize -->
  <script src="./lib/form-serialize.js"></script>
  <!-- 核心逻辑 -->
  <script>
    // 先渲染信息
    const api = 'http://hmajax.itheima.net/api/settings'
    const form= document.querySelector('.user-form')
    const email = document.querySelector('#email')
    const nickname = document.querySelector('#nickname')
    const genders = document.querySelector('.gender')
    const desc = document.querySelector('#desc')
    const img = document.querySelector('.avatar')

    const creator = '播仔'
    axios({
      url:api,
      method:'get',
      params:{
        creator
      }


    }).then(res =>{
      console.log(res)
      const arr = res.data.data
      console.log(arr.desc)
      const data = serialize(form,{hash:true})
     
      for(let key in arr){
        data[key] = arr[key]
      }
      console.log(data)
      email.value = data.email
      nickname.value = data.nickname
      genders.value =+data.gender
      desc.value = data.desc
      img.src = data.avatar

    })
    //更换头像
    const api_touxiang = 'http://hmajax.itheima.net/api/avatar'
    const upload = document.querySelector('#upload')
    upload.addEventListener('change',function(e){
       const data = new FormData()
       data.append('avatar', this.files[0])
      data.append('creator', creator)
      axios({
        url:api_touxiang,
        method:'put',
        data

      }).then(res =>{
        console.log(res)
        img.src = res.data.data.avatar
      })
    })
    // 修改信息
    const toastDom = document.querySelector('.toast')
    const submit = document.querySelector('.submit')
    const toast = new bootstrap.Toast(toastDom)
    const api_xiugai = 'http://hmajax.itheima.net/api/settings'
    submit.addEventListener('click',function(e){
         e.preventDefault()
         const data = serialize(form,{hash:true})
         axios({
          url:api_xiugai,
          method:'put',
          data:{
            ...data,
            creator
          }
         }).then(res =>{
          toast.show()
         })

    })

  </script>
</body>

</html>